import React, { Fragment } from 'react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
interface PaginationProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}
export function Pagination({
  currentPage,
  totalPages,
  onPageChange
}: PaginationProps) {
  // Generate array of page numbers to display
  const getPageNumbers = () => {
    const pageNumbers = [];
    const maxPagesToShow = 5;
    if (totalPages <= maxPagesToShow) {
      // Show all pages if total is less than max to show
      for (let i = 1; i <= totalPages; i++) {
        pageNumbers.push(i);
      }
    } else {
      // Always show first page
      pageNumbers.push(1);
      // Calculate start and end of page range around current page
      let start = Math.max(2, currentPage - 1);
      let end = Math.min(totalPages - 1, currentPage + 1);
      // Adjust range if at the beginning or end
      if (currentPage <= 2) {
        end = 4;
      } else if (currentPage >= totalPages - 1) {
        start = totalPages - 3;
      }
      // Add ellipsis if needed
      if (start > 2) {
        pageNumbers.push('...');
      }
      // Add page range
      for (let i = start; i <= end; i++) {
        pageNumbers.push(i);
      }
      // Add ellipsis if needed
      if (end < totalPages - 1) {
        pageNumbers.push('...');
      }
      // Always show last page
      pageNumbers.push(totalPages);
    }
    return pageNumbers;
  };
  const pageNumbers = getPageNumbers();
  return <div className="flex items-center justify-center space-x-1 mt-8">
      <button onClick={() => onPageChange(currentPage - 1)} disabled={currentPage === 1} className={`p-2 rounded-md ${currentPage === 1 ? 'text-gray-400 cursor-not-allowed' : 'text-[#4a4a4a] hover:bg-[#e8e5e0]'}`} aria-label="Previous page">
        <ChevronLeft size={18} />
      </button>
      {pageNumbers.map((page, index) => <Fragment key={index}>
          {page === '...' ? <span className="px-3 py-2 text-[#4a4a4a]">...</span> : <button onClick={() => typeof page === 'number' && onPageChange(page)} className={`px-3 py-1 rounded-md ${currentPage === page ? 'bg-[#4a6b60] text-white' : 'text-[#4a4a4a] hover:bg-[#e8e5e0]'}`}>
              {page}
            </button>}
        </Fragment>)}
      <button onClick={() => onPageChange(currentPage + 1)} disabled={currentPage === totalPages} className={`p-2 rounded-md ${currentPage === totalPages ? 'text-gray-400 cursor-not-allowed' : 'text-[#4a4a4a] hover:bg-[#e8e5e0]'}`} aria-label="Next page">
        <ChevronRight size={18} />
      </button>
    </div>;
}